/**
 * @export
 * @module miot/ui/ImageButton
 * @description 按钮
 *
 */
import React from 'react';
import {
  StyleSheet,
  Image,
  TouchableOpacity,
  Text,
  View,
} from 'react-native';

export default class ImageButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonPressed: false,
    }
  }
  static initialState = {
    buttonPressed: false,
  };
  static defaultProps = {
    source: null,
    highlightedSource: null,
    onPress: null,
  };
  _buttonPressIn() {
    this.setState({ buttonPressed: true });
  }
  _buttonPressOut() {
    this.setState({ buttonPressed: false });
  }
  _isButtonPressed() {
    return this.state.buttonPressed;
  }
  render() {
    let source = this.props.source;
    if (this._isButtonPressed() && this.props.highlightedSource) {
      source = this.props.highlightedSource;
    }
    return (
      <TouchableOpacity
        onPress={this.props.onPress}
        onPressIn={this._buttonPressIn.bind(this)}
        onPressOut={this._buttonPressOut.bind(this)}
      >
        <View style={[styles.viewStyle]}>
          <Image style={this.props.style} source={source} />
          <Text style={{ marginLeft: 30, fontWeight: "bold", fontSize: 16, color: this._isButtonPressed() ? "#49EF2E" : "white" }}>定时</Text>
        </View>
      </TouchableOpacity>
    );
  }
};


var styles = StyleSheet.create({
  buttonStyle: {
    justifyContent: 'center',
    alignItems: 'center'
  },
  viewStyle: {
    flexDirection: 'column',
    alignItems: 'center',
  }
});


// module.exports = ImageButton;